<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <style type="text/tailwindcss">
        /* 在你的 CSS 文件中（需被 Tailwind 扫描） */
        .btn-hover-effect {
            @apply
            select-none
            transition-all
            hover:opacity-80
            hover:text-white
            hover:shadow-lg
            hover:cursor-pointer
            active:scale-95;
        }
        .flex-center {
            @apply
            flex
            justify-center
            items-center;
        }
    </style>
</head>

<body>
    <div class="bg-sky-700 flex justify-around text-white">
        <div class="w-90 bg-blue-600 flex-center btn-hover-effect">300</div>
        <div class="bg-green-600 px-2 py-1 rounded-lg btn-hover-effect">
            400</div>
        <h1 class="font-bold flex-center bg-red-600"> Hello world! </h1>
    </div>
</body>

</html>